.mg-none {
  margin: 0 !important;
}

.mg-top-none {
  margin-top: 0 !important;
}

.mg-right-none {
  margin-right: 0 !important;
}

.mg-bottom-none {
  margin-bottom: 0 !important;
}

.mg-left-none {
  margin-left: 0 !important;
}

// ! ========== size: 9 ========== ! //
.mg-9 {
  margin: 9px;
}
.mg-top-9 {
  margin-top: 9px;
}
.mg-bottom-9 {
  margin-bottom: 9px;
}
.mg-right-9 {
  margin-right: 9px;
}
.mg-left-9 {
  margin-left: 9px;
}
.mg-tb-9 {
  margin-top: 9px;
  margin-bottom: 9px;
}
.mg-lr-9 {
  margin-left: 9px;
  margin-right: 9px;
}

// ! ========== size: 12 ========== ! //
.mg-12 {
  margin: 12px;
}
.mg-top-12 {
  margin-top: 12px;
}
.mg-bottom-12 {
  margin-bottom: 12px;
}
.mg-right-12 {
  margin-right: 12px;
}
.mg-left-12 {
  margin-left: 12px;
}
.mg-tb-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.mg-lr-12 {
  margin-left: 12px;
  margin-right: 12px;
}

// ! ========== size: 16 ========== ! //
.mg-16 {
  margin: 16px;
}
.mg-top-16 {
  margin-top: 16px;
}
.mg-bottom-16 {
  margin-bottom: 16px;
}
.mg-right-16 {
  margin-right: 16px;
}
.mg-left-16 {
  margin-left: 16px;
}
.mg-tb-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.mg-lr-16 {
  margin-left: 16px;
  margin-right: 16px;
}

// ! ========== size: 20 ========== ! //
.mg-20 {
  margin: 20px;
}
.mg-top-20 {
  margin-top: 20px;
}
.mg-bottom-20 {
  margin-bottom: 20px;
}
.mg-right-20 {
  margin-right: 20px;
}
.mg-left-20 {
  margin-left: 20px;
}
.mg-tb-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mg-lr-20 {
  margin-left: 20px;
  margin-right: 20px;
}

// ! ========== size: 24 ========== ! //
.mg-24 {
  margin: 24px;
}
.mg-top-24 {
  margin-top: 24px;
}
.mg-bottom-24 {
  margin-bottom: 24px;
}
.mg-right-24 {
  margin-right: 24px;
}
.mg-left-24 {
  margin-left: 24px;
}
.mg-tb-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.mg-lr-24 {
  margin-left: 24px;
  margin-right: 24px;
}

// ! ========== size: 28 ========== ! //
.mg-28 {
  margin: 28px;
}
.mg-top-28 {
  margin-top: 28px;
}
.mg-bottom-28 {
  margin-bottom: 28px;
}
.mg-right-28 {
  margin-right: 28px;
}
.mg-left-28 {
  margin-left: 28px;
}
.mg-tb-28 {
  margin-top: 28px;
  margin-bottom: 28px;
}
.mg-lr-28 {
  margin-left: 28px;
  margin-right: 28px;
}

// ! ========== size: 32 ========== ! //
.mg-32 {
  margin: 32px;
}
.mg-top-32 {
  margin-top: 32px;
}
.mg-bottom-32 {
  margin-bottom: 32px;
}
.mg-right-32 {
  margin-right: 32px;
}
.mg-left-32 {
  margin-left: 32px;
}
.mg-tb-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}
.mg-lr-32 {
  margin-left: 32px;
  margin-right: 32px;
}
